<template>
	<view>
		<!-- 轮播 -->
		<view>
			<view class="u-demo-block">
				<!-- 搜索 -->
				<view class="sousuo flx">
					<view class="suosuo_z flx1">
						<view class="flxAlign">
							<image style="width: 40rpx; height: 40rpx;" src="/static/home/sousuo.png"></image>
							<!-- <u-icon name="search" size="30rpx"></u-icon> -->
						</view>
						<view class="flxAlign" style="margin-left:20rpx;">
							<input style="width: 500rpx;" v-model="keyword" placeholder="请输入医院、医生、科室"
								placeholder-class="plc" />
						</view>
					</view>
					<view class="flxAlign" @click="sao">
						<image style="width: 40rpx; height: 40rpx;" src="/static/home/sao.png"></image>
					</view>
				</view>
				<!-- 轮播 -->
				<u-swiper height="450rpx" :radius='0' :list="list5" @change="e => current = e.current" :circular='true'>
					<view slot="indicator" class="indicator">
						<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</u-swiper>
			</view>
		</view>
		<!-- 菜单 -->
		<view>
			<view class="menuStyle flx1_">
				<view class="menuStyle_width" v-for="(item,index) in userMenu" :key="index">
					<view class="flx2">
						<view class="menuStyle_border flxAlign flx2" @click="navter(item.url,index)">
							<view class="">
								<image style="width: 40rpx; height: 40rpx;" :src="item.icon"></image>
							</view>
						</view>
					</view>

					<view style="text-align: center; font-size: 25rpx; margin-top:20rpx;">{{item.text}}</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view style="width: 100%; height: 20rpx; background-color: #dee1ed; margin-top: 30rpx;"></view>
		<!-- 健康咨询 -->
		<view class="textStyle">
			<view class="textStyle_header">健康资讯</view>
			<view class="flx styledata" v-for="(item,index) in healthList" :key="index" @click="jkzxinfo(item)">
				<view style="width: 55%;">
					<view class="styleHeaders">{{item.header}}</view>
					<view class="text u-line-2">{{item.text}}</view>
					<view class="flx text_bottom">
						<view class="flx1">
							<view class="text_bottom_image">
								<image src="/static/home/A_zy.png"></image>
							</view>
							<view class="text_bottom_number">{{item.number}}</view>
						</view>
						<view class="text_bottom_date">{{item.date}}</view>
					</view>
				</view>
				<view class="flxAlign" style="width: 40%;">
					<view class="image_show flxAlign">
						<image :src="item.image"></image>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import image from '../../uni_modules/uview-ui/libs/config/props/image'
	export default {
		data() {
			return {
				keyword: '',
				current: 0,
				list5: [
					'/static/home/u106.png',
					'/static/home/u106.png',
					'/static/home/u106.png',
					'/static/home/u106.png',
				],
				// 用户菜单
				userMenu: [{
						text: '预约挂号',
						icon: '/static/home/u115.png',
						url: '/pages/reservationRegister/index'

					},
					{
						text: '问医生',
						icon: '/static/home/u122.png',
						url: '/pages/OnlineConsultation/index'
					},
					{
						text: '报告单',
						icon: '/static/home/u129.png',
						url: '/pages/ReportPrescription/index'
					},
					{
						text: '门诊记录',
						icon: '/static/home/u136.png',
						url: '/pages/VisitRecord/index'

					},
					{
						text: '门诊费用',
						icon: '/static/home/u143.png',
						url: '/pages/OnlinePayment/FeeDetails'
					},
					{
						text: '住院服务',
						icon: '/static/home/u150.png',
						url: '/pages/HospitalizationServices/index'
					},
					{
						text: '转诊',
						icon: '/static/home/u157.png',
						url: '/pages/twowayReferral/index',
					},
					{
						text: '健康服务',
						icon: '/static/home/u164.png',
						url:'/pages/index/health'
					}
				],
				// 健康
				healthList: [{
						header: '“健康中国2030”规划纲要',
						text: '“健康中国2023”规划要是为推进健康中国建设，提高人民健康水平啊我下啊烦啊发达瓦达瓦阿文低洼',
						number: '102',
						date: '2020-08-12',
						image: '/static/home/home_u.png'
					},
					{
						header: '家庭医生签约战略规划',
						text: '家庭医生签约战略是为推进健康中国建设，提高人家庭医生签约战略规划民健家庭医生签约战略规划康水平啊我家庭医生签约战略规划下啊烦',
						number: '100',
						date: '2020-08-13',
						image: '/static/home/home_t.png'
					},
					{
						header: '医保新政策方案落实',
						text: '“医保新政策方案落实推进，实现小病不怕，大病不忧，实现看病的新方案，提高人家庭医生签约战略规划民健家庭医生签约战略规',
						number: '92',
						date: '2020-08-14',
						image: '/static/home/u106.png'
					}
				]
			}
		},
		onLoad() {

		},
		onShow() {
		},
		methods: {
			jkzxinfo(item){
				
				uni.navigateTo({
					url:'/pages/index/indexInfo?datas=' + JSON.stringify(item)
				})
			},
			navter(url, index) {
			
					console.log(url);
					uni.navigateTo({
						url: url
					})
				

			},
			sao() {
				uni.scanCode({
					success: function(res) {
						scanType: ['qrCode'],
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.sousuo {
		position: absolute;
		width: 95%;
		height: 65rpx;
		margin-left: 2.5%;
		z-index: 90;
		top: 50rpx;

		.suosuo_z {
			background-color: rgba(255, 255, 255, .5);
			border-radius: 30rpx;
			padding: 20rpx;

			.plc {
				color: #FFFFFF;
			}
		}
	}

	.menuStyle {
		width: 90%;
		margin: 0 auto;

		.menuStyle_width {
			width: 25%;
			margin-top: 20rpx;

			.menuStyle_border {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				border: #333 1rpx solid;
			}
		}

	}

	.textStyle {

		.textStyle_header {
			width: 90%;
			margin: 0 auto;
			color: #cecece;
			line-height: 80rpx;
			border-bottom: solid #eeee 1rpx;
			font-size: 25rpx;
			font-weight: 600;
			letter-spacing: 2rpx;
		}

		.styledata {
			width: 90%;
			margin: 0 auto;
			margin-top: 30rpx;

			.styleHeaders {
				color: #333;
				font-size: 30rpx;
				font-weight: 600;
				line-height: 60rpx;
			}

			.text {
				color: #bfbebf;
				font-size: 20rpx;
			}

			.text_bottom {
				margin-top: 20rpx;

				.text_bottom_image {
					width: 30rpx;
					height: 25rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text_bottom_number {
					margin-left: 10rpx;
					color: #cecece;
					font-size: 20rpx;
					margin-top: 4rpx;
				}
			}

			.text_bottom_date {
				color: #cecece;
				font-size: 20rpx;
				margin-top: 4rpx;
			}
		}

		.image_show {
			width: 100%;
			height: 200rpx;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>